<template>
  <section>
    <ul class="header-nav">
		<!-- <li :class="item.id==id?'h2 active':''" v-for="item in headers" :key="item.id"> -->
      <li :class="getClassObj(item.id)" v-for="item in headers" :key="item.id">
        <router-link :to="'/news/' + item.id">{{item.name}}</router-link>
      </li>
    </ul>
    <news-list :list-data="listData"></news-list>
  </section>
</template>

<script setup lang="ts">
import { defineProps, watch,reactive } from "vue";
import ajax from "@/util/request";
import NewsList from "./news-list.vue";

// export default {
//   props: {
//     id: {
//       type: String,
//     },
//   },
//   watch: {
//     id: {
//       immediate: true,
//       handler(newVal) {
//         console.log("有新的id传入：", newVal);
//         ajax("/content/queryList",{t_cat_plant_pk: newVal,rows: 10}).then(res => {
//             console.log(res.data.result_data);
//         })

//       },
//     },
//   },
// };

const headers = [
    {id: 405,name: "学院新闻"},
    {id: 406,name: "党建动态"},
    {id: 407,name: "通知公告"},
    {id: 408,name: "分院动态"},
]

const props = defineProps({
  id: {
    type: String,
  },
});

const listData = reactive([]);

watch(
  function () {
    return props.id;
  },
  (newVal:any) => {
    console.log("有新的id传入：", newVal);
    ajax("/content/queryList", { t_cat_plant_fk: newVal, rows: 10 }).then(
      (res) => {
        // listData = res.data.result_data;
        listData.length = 0;
        listData.push(...res.data.result_data)
        console.log("listData = ",listData);
      }
    );
  },
  {immediate: true}
);

function getClassObj(id:any) {
    return {
        h2: true,
		active:props.id==id,
		 
    }
	
}

</script>

<style scoped lang="scss">
.header-nav {
  display: flex;

  & > .h2 {
    margin-right: 5px;
    font-weight: 600;

    & > a {
      color: #000;
    }
  }

  & > .active > a {
    color: var(--base-color);
  }
}
</style>